<template>
  <div class="list">
      <div class="tui">
          <span>推荐攻略</span>
      </div>
      <ul class="section">
          <li v-for="(v) in arr" :key="v.id">
              <p class="title">{{v.name}}</p>
              <div class="cont">
                  <img :src="v.bigimg" alt="">
                  <div class="left">
                      <p>{{v.title}}</p>
                      <div class="bot">
                          <span>{{v.number}}</span>
                          <div class="bot-right">
                              <span>{{v.username}}</span>
                              <img :src="v.litimg"  class="img" alt="">
                          </div>
                      </div>
                  </div>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
import {homelink} from "@/api/homeapi.js"
export default {
    data(){
        return {
            arr:[],
        }
    },
    mounted(){
        homelink("/home/listjson","get").then((ok)=>{
            this.arr = ok.data.arr;
        })
    }
}
</script>

<style scoped>
    .tui{
        margin-left: 0.4rem;
    }
    .tui span{
        display: inline-block;
        padding-left: 5px;
        border-left: #ffdb53 solid 3px;
        border-radius: 2px;
        font-size: .433rem;
        font-weight: 600;
        line-height: .533rem;
        background: #fff;
    }
    ul li .title{
        padding: .3rem 1.5rem 0 .4rem;
        font-size: .433rem;
        color: #111;
        line-height: 1.4em;
        max-height: 1.3rem;
        position: relative;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    ul li .cont{
        padding: .24rem .4rem .4rem;
        display: flex;
        justify-content: space-between;
    }
    ul li .cont img{
        width: 3.466rem;
        height: 2.4rem;
    }
    ul li .left{
        width: 60%;
        margin-left: 0.3rem;
        color: #999;
        height: 2.4rem;
        position: relative;
    }
    .left p{
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.5em;
        font-size: .35rem;
        padding: .14rem 0 0;
    }
    .bot{
        height: .533rem;
        font-size: .29rem;
        line-height: .533rem;
        width: 100%;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: space-between;
    }
    .bot-right .img{
        width: .533rem;
        height: .533rem;
        border-radius: 50%;
        vertical-align: middle;
        margin-left: 0.2rem;
    }
</style>>